<!-- 搜索栏配置参数面板 -->
<script setup lang="ts">
import { ref, watch, PropType, reactive, CSSProperties } from 'vue'
import { FormItemProps, FormSchema } from '@/components/Form'
import { ContentWrap } from '@/components/ContentWrap'
import {
  ElInput,
  ElForm,
  ElFormItem,
  ElSelect,
  ElOption,
  ElRadioGroup,
  ElRadio,
  ElTooltip,
  ElCollapse,
  ElCollapseItem,
  ElButton,
  ElDivider,
  ElScrollbar
} from 'element-plus'
import {
  propsDefault,
  MyFormSchema,
  isEmptyObject,
  delDefaultVal
} from '@/components/SetupFormOptionCode'
import {
  searchForm,
  searchFormTypeList,
  SearchFormComponentPropsItemArr
} from '@/components/SetupFormOptionCode/src/search'
import { cloneDeep } from 'lodash-es'

const props = defineProps({
  currentRow: Object as PropType<MyFormSchema>,
  scrollbarHeight: Number
})

const emits = defineEmits(['save'])
const disabled = ref(false)
// 使用 reactive 创建响应式数据
const form = ref({
  // 初始化时使用默认值填充
} as MyFormSchema)

let componentPropsForm = reactive<any>({})
let formItemPropsFormStyle = reactive<CSSProperties>(propsDefault.formItemPropsStyle)
watch(
  () => props.currentRow,
  (newRow) => {
    if (!newRow) {
      disabled.value = true
      return
    } else {
      disabled.value = false
      const cloneDefault = cloneDeep(propsDefault)

      const deepForm = cloneDeep(newRow)
      // 更新 form 数据，使用默认值填充空字段
      form.value = {
        ...deepForm
      }
      if (deepForm.componentProps) {
        componentPropsForm = reactive({
          ...cloneDefault[deepForm.template || 'Input'],
          ...(deepForm.componentProps || {})
        })
      } else {
        componentPropsForm = reactive(cloneDefault[deepForm.template || 'Input'])
      }
      if (deepForm.formItemProps) {
        formItemPropsFormStyle = reactive({
          ...cloneDefault.formItemPropsStyle,
          ...(deepForm.formItemProps.style || {})
        })
      } else {
        formItemPropsFormStyle = reactive(cloneDefault.formItemPropsStyle)
      }
    }
    // console.log('currentRow改变-form', form, componentPropsForm)
  },
  { immediate: true, deep: true }
)
function changeComponent(e) {
  console.log('changeComponent', e)
  form.value.component =
    searchFormTypeList.find((item) => item.template === e)?.value || ('Input' as any)
  form.value.template = e

  const cloneDefault = cloneDeep(propsDefault)
  componentPropsForm = reactive(cloneDefault[form.value.template || 'Input'])

  formItemPropsFormStyle = reactive(cloneDefault.formItemPropsStyle)
}
function save() {
  const emitForm: any = cloneDeep({
    ...form.value,
    componentProps: delDefaultVal(
      propsDefault[(form.value as MyFormSchema).template || 'Input'],
      cloneDeep(componentPropsForm)
    ),
    formItemProps: {
      style: delDefaultVal(propsDefault.formItemPropsStyle, cloneDeep(formItemPropsFormStyle))
    }
  })

  if (isEmptyObject(emitForm.componentProps)) {
    delete emitForm.componentProps
  }
  if (isEmptyObject(emitForm.formItemProps?.style)) {
    delete emitForm.formItemProps
  }

  emits('save', emitForm)
}
</script>
<template>
  <ContentWrap title="选项参数" class="w-300px">
    <template #header>
      <div class="w-100% flex justify-end">
        <ElButton @click="save" type="primary" :disabled="disabled">保存 </ElButton>
      </div>
    </template>
    <el-scrollbar :height="scrollbarHeight" v-if="!disabled">
      <!-- 基础属性 -->
      <ElForm label-position="left" label-width="auto" :model="form">
        <ElFormItem v-for="(formItem, index) in searchForm" :key="index" :label="formItem.label">
          <template v-if="formItem.type === 'input'">
            <ElInput v-model="form[formItem.value]" :disabled="formItem.disabled" />
          </template>
          <template v-if="formItem.type === 'select'">
            <ElSelect v-model="form[formItem.value]" :disabled="formItem.disabled">
              <ElOption
                v-for="item in formItem.options"
                :key="formItem.value + item.value.toString()"
                :label="item.label"
                :value="item.value"
              />
            </ElSelect>
          </template>
        </ElFormItem>
        <ElFormItem label="类型">
          <ElSelect v-model="form.component" @change="changeComponent">
            <ElOption
              v-for="item in searchFormTypeList"
              :key="item.template"
              :label="item.label"
              :value="item.template"
            />
          </ElSelect>
        </ElFormItem>
      </ElForm>

      <ElForm label-position="left" label-width="auto">
        <!-- 通用 componentProps -->
        <template
          v-for="formItem in SearchFormComponentPropsItemArr[form.template || 'Input']
            .componentProps"
          :key="formItem.value"
        >
          <template v-if="formItem.type === 'divider'">
            <ElDivider content-position="left">输入框配置</ElDivider>
          </template>
          <template v-else>
            <ElFormItem :label="formItem.label">
              <template v-if="formItem.type === 'input'">
                <ElInput
                  v-model="componentPropsForm[formItem.value]"
                  :placeholder="formItem.placeholder || '请输入'"
                />
              </template>
              <template v-if="formItem.type === 'radio'">
                <ElRadioGroup v-model="componentPropsForm[formItem.value]">
                  <ElRadio
                    v-for="item in formItem.options"
                    :key="item.label"
                    :value="item.value"
                    size="small"
                    >{{ item.label }}</ElRadio
                  >
                </ElRadioGroup>
              </template>
              <template v-if="formItem.type === 'select'">
                <ElSelect
                  v-model="componentPropsForm[formItem.value]"
                  :placeholder="formItem.placeholder || '请选择'"
                >
                  <ElOption
                    v-for="(item, index) in formItem.options"
                    :key="formItem.value + index.toString()"
                    :label="item.label"
                    :value="item.value"
                  />
                </ElSelect>
              </template>
            </ElFormItem>
          </template>
        </template>

        <!-- Style -->
        <template
          v-for="formItem in SearchFormComponentPropsItemArr[form.template || 'Input']
            .componentPropsStyle"
          :key="formItem.value"
        >
          <ElFormItem :label="formItem.label">
            <template v-if="formItem.type === 'input'">
              <ElInput
                v-model="componentPropsForm.style[formItem.value]"
                :placeholder="formItem.placeholder || '请输入'"
              />
            </template>
            <template v-if="formItem.type === 'radio'">
              <ElRadioGroup v-model="componentPropsForm.style[formItem.value]">
                <ElRadio
                  v-for="item in formItem.options"
                  :key="item.label"
                  :value="item.value"
                  size="small"
                  >{{ item.label }}</ElRadio
                >
              </ElRadioGroup>
            </template>
            <template v-if="formItem.type === 'select'">
              <ElSelect
                v-model="componentPropsForm.style[formItem.value]"
                :placeholder="formItem.placeholder || '请选择'"
              >
                <ElOption
                  v-for="(item, index) in formItem.options"
                  :key="formItem.value + index.toString()"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </template>
          </ElFormItem>
        </template>
        <!-- Props -->
        <template
          v-for="formItem in SearchFormComponentPropsItemArr[form.template || 'Input']
            .componentPropsProps"
          :key="formItem.value"
        >
          <template v-if="formItem.type === 'divider'">
            <ElDivider content-position="left">{{ formItem.label }}</ElDivider>
          </template>
          <template v-else>
            <ElFormItem :label="formItem.label">
              <template v-if="formItem.type === 'input'">
                <ElInput
                  v-model="componentPropsForm.props[formItem.value]"
                  :placeholder="formItem.placeholder || '请输入'"
                />
              </template>
              <template v-if="formItem.type === 'radio'">
                <ElRadioGroup v-model="componentPropsForm.props[formItem.value]">
                  <ElRadio
                    v-for="item in formItem.options"
                    :key="item.label"
                    :value="item.value"
                    size="small"
                    >{{ item.label }}</ElRadio
                  >
                </ElRadioGroup>
              </template>
              <template v-if="formItem.type === 'select'">
                <ElSelect
                  v-model="componentPropsForm.style[formItem.value]"
                  :placeholder="formItem.placeholder || '请选择'"
                >
                  <ElOption
                    v-for="(item, index) in formItem.options"
                    :key="formItem.value + index.toString()"
                    :label="item.label"
                    :value="item.value"
                  />
                </ElSelect>
              </template>
            </ElFormItem>
          </template>
        </template>
        <!-- FormItemStyle -->
        <template
          v-for="formItem in SearchFormComponentPropsItemArr[form.template || 'Input']
            .formItemPropsStyle"
          :key="formItem.value"
        >
          <template v-if="formItem.type === 'divider'">
            <ElDivider content-position="left">{{ formItem.label }}</ElDivider>
          </template>
          <template v-else>
            <ElFormItem :label="formItem.label">
              <template v-if="formItem.type === 'input'">
                <ElInput
                  v-model="formItemPropsFormStyle[formItem.value]"
                  :placeholder="formItem.placeholder || '请输入'"
                />
              </template>
              <template v-if="formItem.type === 'radio'">
                <ElRadioGroup v-model="formItemPropsFormStyle[formItem.value]">
                  <ElRadio
                    v-for="item in formItem.options"
                    :key="item.label"
                    :value="item.value"
                    size="small"
                    >{{ item.label }}</ElRadio
                  >
                </ElRadioGroup>
              </template>
              <template v-if="formItem.type === 'select'">
                <ElSelect
                  v-model="formItemPropsFormStyle[formItem.value]"
                  :placeholder="formItem.placeholder || '请选择'"
                >
                  <ElOption
                    v-for="(item, index) in formItem.options"
                    :key="formItem.value + index.toString()"
                    :label="item.label"
                    :value="item.value"
                  />
                </ElSelect>
              </template>
            </ElFormItem>
          </template>
        </template>
      </ElForm>
    </el-scrollbar>
  </ContentWrap>
</template>
